/*
 * @Author: wangmyng wangmyng@163.com
 * @Date: 2025-11-02 22:00:53
 * @LastEditors: wangmyng wangmyng@163.com
 * @LastEditTime: 2025-11-09 23:11:06
 */
import { useState, useEffect } from "react";
import "./index.less";
import { fetchCurrentWarningList } from "@/api/hap";
import DashboardCard from "@/components/pc/DashboardCard";
import SegmentNumber from "@/components/pc/SegmentNumber";

interface TodayAlertsCardProps {
  collapsed?: boolean;
}

interface AlertItem {
  incidentCategory: any;
  id: string;
  serial: number;
  incidentStatus: string;
  incidentAddress: string;
  receiveTime: string;
}

/**
 * 首页：今日警情
 */
const TodayAlertsCard: React.FC<TodayAlertsCardProps> = () => {
  const [alertsData, setAlertsData] = useState<AlertItem | null>(null);
  const [carsData, setCarsData] = useState<AlertItem | null>(null);
  const [titleIndex, setTitleIndex] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    getAlertsData();
  }, []);

  useEffect(() => {
    titleIndex && carsData == null && getCarsData();
  }, [titleIndex]);

  const getAlertsData = async () => {
    setLoading(true);
    const data = await fetchCurrentWarningList([
      {
        controlId: "receiveTime",
        dataType: 16,
        dateRange: 101,
        dateRangeType: 11,
        filterType: 37,
        spliceType: 1,
        value: "1",
        values: ["today"],
      },
    ]);
    const rows = data.rows;
    setAlertsData(rows?.[0] || null);
    setLoading(false);
  };

  const getCarsData = async () => {
    setLoading(true);
    const data = await fetchCurrentWarningList([
      {
        controlId: "receiveTime",
        dataType: 16,
        dateRange: 101,
        dateRangeType: 11,
        filterType: 37,
        spliceType: 1,
        value: "1",
        values: ["today"],
      },
    ]);
    const rows = data.rows;
    setCarsData(rows?.[1] || null);
    setLoading(false);
  };

  const DataColumn = ({ title, number, color }: { title: string; number: number; color: string }) => {
    return (
      <div className="alerts-column">
        <div className="column-title">{title}</div>
        <div className="column-number">
          <SegmentNumber value={number} color={color} />
        </div>
      </div>
    );
  };

  const AlertsContent = () => {
    return (
      <div className="content-container">
        <DataColumn title="火警" number={alertsData?.autoid || 0} color="red" />
        <DataColumn title="抢险救援" number={0} color="orange" />
        <DataColumn title="社会救助" number={0} color="rgba(99, 176, 248, 1)" />
        <DataColumn title="其他" number={0} color="gray" />
      </div>
    );
  };

  const CarsContent = () => {
    return (
      <div className="content-container">
        <DataColumn title="在线" number={carsData?.personnelCount || 0} color="green" />
        <DataColumn title="离线" number={0} color="gray" />
        <DataColumn title="维修中" number={0} color="orange" />
        <DataColumn title="执行任务" number={0} color="red" />
      </div>
    );
  };

  return (
    <div className={`today-alerts-card`}>
      <DashboardCard titles={["今日警情", "车辆数据"]} onTitleChange={setTitleIndex} loading={loading}>
        {titleIndex == 0 && <AlertsContent />}
        {titleIndex == 1 && <CarsContent />}
      </DashboardCard>
    </div>
  );
};

export default TodayAlertsCard;
